<template>
    <div class="canvas">
        <div class="ludanbox">
            <div class="ludanleft" v-html="a" :class="{'and':showAniamte}">
            </div>
            <div class="ludanright">
                <div class="ludan_top" v-html="b" :class="{'and':showAniamte}">
                </div>
                <div class="ludan_middle" v-html="c" :class="{'and':showAniamte}">
                </div>
                <div class="ludan_middle">
                    <div class="ludan_m_le" v-html="d" :class="{'and':showAniamte}">
                    </div>
                    <div class="ludan_m_ri" v-html="e" :class="{'and':showAniamte}">
                    </div>
                </div>
            </div>
        </div>
        <div class="UlButton">
            <ul>
                <li style="color: #d40a20"><p>庄</p> 	<p>22</p></li>
                <li style="color: #143ad9"><p>闲</p> 	<p>19</p></li>
                <li style="color: #3bc940"><p>和</p> 	<p>6</p></li>
                <li style="color: #d40a20"><p>庄对</p> <p>3</p></li>
                <li  style="color: #143ad9"><p>闲对</p> <p>1</p></li>
                <li><p>总数</p> <p>51</p></li>
                <div class="divBox" style="color: #d40a20" @click="changeZ">庄问路
                    <div style="width: 6px;height: 6px;border-radius: 50%;border: 2px solid #d40a20"></div>
                    <div style="width: 9px;height: 9px;border-radius: 50%;background: #d40a20"></div>
                    <div style="width: 9px;height: 3px;background: #d40a20;border-radius: 3px;transform: rotate(-45deg)"></div>
                </div>
                <div class="divBox" style="color: #143ad9" @click="changeH">闲问路
                        <div style="width: 6px;height: 6px;border-radius: 50%;border: 2px solid #143ad9"></div>
                        <div style="width: 9px;height: 9px;border-radius: 50%;background: #143ad9"></div>
                        <div style="width: 9px;height: 3px;background: #143ad9;border-radius: 3px;transform: rotate(-45deg)"></div>
                </div>
            </ul>
        </div>	
    </div>    		
</template>
<script>
export default {
    name:"ulBtn",
     data: function () {
        return {
            a: null,
            b: null,
            c: null,
            d: null,
            e: null,
            showAniamte: false
        };
    },
    methods: {
        // 获取路单列表
        canvasLudan: function (x) {
            var _this = this;
            var LudanWorker = new Worker("../../../../static/js/ludan.js");
            LudanWorker.postMessage(x);
            LudanWorker.onmessage = function (data) {
                switch (data.data.id) {
                    case 1:
                        _this.a = data.data.html;
                        break;
                    case 2:
                        _this.b = data.data.html;
                        break;
                    case 3:
                        _this.c = data.data.html;
                        break;
                    case 4:
                        _this.d = data.data.html;
                        break;
                    case 5:
                        _this.e = data.data.html;
                        return true;
                        break;
                }
            };
            LudanWorker.onerror = function (el) {
                console.log('错误' + el.filename + ":第" + el.lineno + "行");
            };
        },
        changeZ: function () {
            this.canvasLudan("aefaebeeeeeaaaaaeeeeea");
            this.showAniamte = true;
        },
        changeH: function () {
            this.canvasLudan("aefaebeeeeeaaaaaeeeeee");
            this.showAniamte = true;
        }
    },
    mounted: function () {
        if (window.Worker) {
            this.canvasLudan("aefaebeeeeeaaaaaeeeee");
        }
    }


}
</script>
<style scoped>
</style>


